<template>
  <el-container>
    <el-aside style="background-color: #fff">
      <sticky>
        <el-empty style="background-color: #fff" v-if="treeData.length == 0" description="暂无数据"></el-empty>
        <el-tree v-else class="tree-line content" default-expand-all :data="treeData">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <div class="index-score">
              <div>
                <span
                  :style="fontSize(node, data)"
                  :class="data.indexCode + 'index' == indexName && node.isLeaf ? 'nodeLabel-isChoose' : 'nodeLabel'"
                  @click="() => handleNodeClick(node, data)"
                  >{{ data.name }}</span
                >
                <i v-if="data.finished" class="rivericon icon-duigou_kuai" style="color: #67c23a"></i>
              </div>
              <div>
                <div
                  v-if="data.finished && isExpert"
                  :class="{ 'bule-color': data.pid != -1, 'green-color': data.pid == -1 }"
                  class="score">
                  {{ data.pid == -1 ? "总分" : "评分" }}：{{ data.score }}
                </div>
              </div>
            </div>
          </span>
        </el-tree>
      </sticky>
    </el-aside>
    <el-main v-loading="loading" style="background-color: #fff; border-left: 1px solid #dcdfe6">
      <SearchArea :riverId="riverId" @selectChanged="selectChanged" />

      <el-empty v-if="indexComponent == null" description="暂无数据"></el-empty>
      <component
        v-else
        @changeLoading="changeLoading"
        :indexName="indexName"
        :indexId="indexId"
        :riverId="riverId"
        :audit="audit"
        @refreshIndexList="refreshIndexList"
        :is="indexComponent"></component>
    </el-main>
  </el-container>
</template>

<script>
import SearchArea from "./SearchArea.vue"
import { isEmpty } from "@/util/empty"
import { getTreeFiltered } from "@/api/sysindex"
import { mapGetters } from "vuex"
import sticky from "./sticky.vue"
import store from "@/store"

export default {
  name: "treePage",
  components: {
    SearchArea,
    sticky,
  },
  data() {
    return {
      loading: false,
      indexName: "",
      indexId: null,
      riverId: null,
      cityId: null,
      countyId: null,
      indexComponent: null,
      treeData: [],
      isExpert: false,
      audit: null,
    }
  },
  watch: {
    riverId(val) {
      if (!isEmpty(val)) {
        this.getTreeFiltered(val)
      } else {
        this.indexComponent = null
        this.treeData = []
      }
    },
    indexName(val) {
      if (isEmpty(val)) {
        this.indexComponent = null
      }
    },
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  beforeRouteEnter(to, from, next) {
    let em1 = isEmpty(to.query.riverId)
    let em2 = isEmpty(to.query.audit)
    if (!em1 || !em2) {
      if (!em1 && !em2) {
        let audit = to.query.audit
        if (audit == 1 && !store.getters.permissions.river_report_audit) {
          next("/river/river/index")
        }
        let riverId = to.query.riverId
        next((vm) => {
          vm.initQuery(riverId, audit)
        })
      } else {
        next("/river/river/index")
      }
    } else {
      next()
    }
  },
  created() {
    this.isExpert = this.vaildData(this.permissions["river_report_audit"], false)
  },
  methods: {
    initQuery(riverId, audit) {
      this.audit = audit
      this.riverId = riverId
    },
    //SearchArea下拉选择之后的回调（只有河湖改变才会触发）
    selectChanged(riverId) {
      if (isEmpty(this.indexComponent) && !isEmpty(this.indexName)) {
        this.indexComponent = (resolve) => require([`@/views/river/IndexComponents/${this.indexName}`], resolve)
      }
      this.riverId = riverId
    },
    getTreeFiltered(riverId) {
      let isExpert = this.isExpert
      if (this.audit != null) {
        isExpert = this.audit == 1 ? true : false
      }
      getTreeFiltered(riverId, isExpert).then((res) => {
        let treeList = res.data.data
        this.treeData = treeList
        this.$store.dispatch("setIndexTreeData", treeList)
      })
    },
    refreshIndexList() {
      this.getTreeFiltered(this.riverId)
    },
    handleNodeClick(node, data) {
      if (data.pid == "-1" && (data.indexCode == null || data.indexCode == "")) {
        this.indexName = ""
        return
      }
      let path = data.indexCode + "index"
      this.indexName = path
      this.indexId = data.id
      if (isEmpty(this.riverId)) return
      return (this.indexComponent = (resolve) => require([`@/views/river/IndexComponents/${path}`], resolve))
    },
    // 每一级字体变小
    fontSize(node, data) {
      return "font-size:" + (18 - node.level * 2) + "px"
    },
    changeLoading(val) {
      this.loading = val
    },
  },
}
</script>

<style lang="scss">
.index-score {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

  justify-content: space-between;
  .score {
    background-color: #ecf5ff;
    border-radius: 4px;
    font-size: 10px;
    padding: 0 6px;
    border: 1px solid #d9ecff;
  }
  .bule-color {
    color: #409eff;
  }
  .green-color {
    color: #67c23a;
  }
  .rivericon {
    margin-left: 10px;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px;  // 按钮右边的缩进*/
}
.nodeLabel {
  color: #606266;
  width: 100px;
  margin-left: 10px;
}
.nodeLabel-isChoose {
  width: 100px;
  margin-left: 10px;
  // color: #7fb545;
}

.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
    transition: all 0.5s; // 关键动画！！！
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px solid #e9e9e9;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 48px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 18px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 20px;
    border-width: 1px;
    border-top: 1px solid #e9e9e9;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // display: none; // 也可以去掉
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      display: none; // 也可以去掉
    }
  }
  .el-tree-node__content {
    padding-left: 5px !important;
    height: 40px;
  }
}
.content {
  padding-right: 7px;
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 200px);
  border-bottom: 1px solid #dcdfe6;
}
.content::-webkit-scrollbar {
  // display: none;
  width: 2px;
  height: 1px;
}
.content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(127, 181, 69, 1);
}
.content::-webkit-scrollbar-track {
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}
</style>
